@import '~@styles/layout.less';
@import '~@styles/common.less';

.container {
  width: 100%;
  height: calc(100vh - 100px);
  transition: all 0.3s ease-in-out;

  .wrap {
    height: 100%;
    width: 100%;
    background-color: @content-padding;

    .scrollWrap {
      display: flex;
      justify-content: center;
      height: 100%;
      width: 100%;
      background-color: @background;
      overflow-y: auto;
      overflow-x: hidden;

      .scrollBar {
        & > div:first-child {
          margin-right: 0 !important;
          margin-bottom: 0 !important;

          /*整个滚动条*/
          &::-webkit-scrollbar {
            width: 6px;
            height: 5px;
          }

          &::-webkit-scrollbar-corner {
            background-color: transparent;
          }
        }
      }
    }

    .dark {
      background-color: @dark-bgc;
    }
  }

  .hideWrapPadding {
    padding: 0;
    background-color: transparent;
    padding-top: 9px;
  }

  .contentWidth {
    :global {
      #CONTENT {
        max-width: 960px;
        margin: auto;
      }
    }
  }
}

.showContainer {
  height: calc(100vh - 50px);
  transition: all 0.3s ease-in-out;
}

.darkContainer {
  background-color: @dark-bgc;
}

@media screen and (max-width: 960px) {
  .showContainer {
    height: calc(100vh - 100px);
    transition: all 0.3s ease-in-out;
  }

  .darkContainer {
    .wrap {
      background-color: @dark-gray;
    }
  }
}
